<template>
	<view class="content">
		<view class="address flex">
			<view class="address-info">
				<view class="address-tit">{{selectSite.name}}</view>
				<view class="address-deta">{{selectSite.address}}</view>
			</view>
			<view>
				<u-button size="mini" plain="true" :custom-style="addressBtn" @click="handleMap">重新选择</u-button>
			</view>
		</view>
		<view class="address form">
			<u-form :model="BuyerInfo" ref="uForm" label-width="130" :border-bottom="false">
				<u-form-item label="收货人" prop="name">
					<u-input v-model="BuyerInfo.name" :clearable="false" placeholder="请填写收货人地址" />
				</u-form-item>
				<u-form-item label="手机号" prop="mobile">
					<u-input v-model="BuyerInfo.mobile" :clearable="false" placeholder="请填写收货手机号" />
				</u-form-item>
				<u-form-item label="门牌号" prop="House">
					<u-input v-model="BuyerInfo.House" :clearable="false" placeholder="详细地址，例一层1001室" />
				</u-form-item>
				<u-form-item label="设置为默认地址" label-width="210">
					<u-switch v-model="BuyerInfo.isValue" slot="right" size="44"></u-switch>
				</u-form-item>
			</u-form>
		</view>
		<view class="bot-btn">
			<u-button :custom-style="btnPlus" hair-line="false" shape="circle" @click="linkAddSelect">保存地址</u-button>
		</view>
	</view>
</template>

<script>
	const key = 'RAPBZ-JIWCP-HB6D4-V2RWS-LUHZE-OHF34'; //使用在腾讯位置服务申请的key
	const referer = 'myapp'; //调用插件的app的名称  
	const location = "";
	const chooseLocation = requirePlugin('chooseLocation');

	import QQMapWX from "static/css/qqmap-wx-jssdk.min.js";
	let qqmapsdk = new QQMapWX({
		key: 'RAPBZ-JIWCP-HB6D4-V2RWS-LUHZE-OHF34'
	});

	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				checked: false,
				addressBtn: {
					borderColor: "#FC838F",
					color: "#FC5061"
				},
				selectSite: {
					address: "四川省成都市武侯区天府大道1736号",
					name: "成都环球中心天堂洲际大饭店"
				},
				BuyerInfo: {
					Shipping: "",
					mobile: "",
					House: "",
					isValue: false
				},
				btnPlus: {
					width: "690rpx",
					height: "80rpx",
					bordeRadius: "40rpx",
					background: " #F74F6B",
					fontSize: "30rpx",
					color: "#FFFFFF"
				},
				rules: {
					name: {
						required: true,
						message: "请填写收货人地址",
						trigger: "blur"
					},
					mobile: {
						required: true,
						message: "请填写收货手机号",
						trigger: "blur"
					},
					House: {
						required: true,
						message: "请填写详细地址",
						trigger: "blur"
					}
				}
			}
		},
		created() {
			this.getNowAddress();
			// this.$nextTick(() => {
			// 	this.handleMap()
			// })
		},
		onShow() {
			const location = chooseLocation.getLocation();
			if (location) {
				this.selectSite = location;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getNowAddress() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(data) {
						_this.location = JSON.stringify({
							latitude: data.latitude,
							longitude: data.longitude
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: data.latitude,
								longitude: data.longitude
							},
							success(res) {
								_this.selectSite.address = res.result.address;
								_this.selectSite.name = res.result.formatted_addresses.recommend;
							}
						})
					}
				});
			},
			handleMap() {
				uni.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location
				});
			},
			linkAddSelect() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.navigateTo({
							url: "/pages/address/select"
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 20rpx 20rpx 0;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address {
		padding: 26rpx 20rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.form {
		padding-top: 0;
		padding-bottom: 0;
	}

	.address-tit {
		color: #333333;
		font-size: 28rpx;
		line-height: 28rpx;
	}

	.address-deta {
		color: #7f7f7f;
		font-size: 22rpx;
		line-height: 22rpx;
		margin-top: 18rpx;
	}

	.bot-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 24rpx 30rpx;
	}
</style>
